<template>
  <div class="page">
    <div class="list">
      <el-card v-for="item in list" :key="item.id" shadow="hover">
        <div class="content">
          <div class="left">
            <div>{{ item.title }}</div>
            <div class="left-tag">
              <div>
                <img :src="commend" />
                <span>三级甲等</span>
              </div>
              <div>2024-01-01</div>
            </div>
          </div>
          <div class="right">
            <img :src="item.img" />
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination
      v-model:current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @current-change="handleCurrentChange"
    >
      <template v-slot:default> 123 </template>
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import commend from '@/assets/commend.svg'
import { getHospitalList } from '@/api/home'

onMounted(() => {
  getHospitalData()
})

let list = ref([
  {
    id: 0,
    title: '航天中心医院',
    img: new URL(`../../../assets/home/hospitalList/icon1.jpg`, import.meta.url).href
  },
  {
    id: 1,
    title: '北京大学国际医院',
    img: new URL(`../../../assets/home/hospitalList/icon2.jpg`, import.meta.url).href
  },
  {
    id: 2,
    title: '北京市隆福医院',
    img: new URL(`../../../assets/home/hospitalList/icon3.jpg`, import.meta.url).href
  },
  {
    id: 3,
    title: '北京市顺义区医院',
    img: new URL(`../../../assets/home/hospitalList/icon4.jpg`, import.meta.url).href
  },
  {
    id: 4,
    title: '北京市中医药大学房山医院',
    img: new URL(`../../../assets/home/hospitalList/icon5.jpg`, import.meta.url).href
  },
  {
    id: 5,
    title: '首都医科大学附属北京天坛医院',
    img: new URL(`../../../assets/home/hospitalList/icon6.jpg`, import.meta.url).href
  }
])

const getHospitalData = async () => {
  // let params = {
  //   offset: 0,
  //   size: 10
  // }
  // const data = await getHospitalList(params)
  // console.log(data)
  console.log('请求列表')
}

let currentPage = ref(1)
const handleCurrentChange = (val) => {
  console.log(val)
}
</script>

<style lang="scss" scoped>
.page {
  margin-top: 10px;
  padding: 10px 10px;

  .list {
    display: flex;
    justify-content: space-around;

    flex-wrap: wrap;

    .el-card {
      width: 48%;
      margin-bottom: 15px;

      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          width: 100%;

          .left-tag {
            margin-top: 10px;
            padding-right: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            div:nth-child(1) {
              display: flex;
              align-items: center;
            }

            img {
              width: 20px;
              height: 20px;
              margin-right: 5px;
            }
          }
        }

        .right {
          img {
            width: 50px;
            height: 50px;
          }
        }
      }
    }
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
